<template>
  <view class="main">
    <view class="ip-item">
      <input type="text" v-model="circleName" placeholder="请输入圈子名称" placeholder-class="ip" />
    </view>
    <view class="ip-item" @click="groupShow = true">
      <input type="text" v-model="formData.groupData" placeholder="请选择入群填写项" disabled placeholder-class="ip" />
      <image src="/static/icon/down.svg" mode="widthFix" />
      <view class="block"></view>
    </view>
    <view class="ip-item" @click="telEshow = true">
      <input type="text" v-model="currentName" placeholder="请选择手机号加密方式" disabled placeholder-class="ip" />
      <image src="/static/icon/down.svg" mode="widthFix" />
      <view class="block"></view>
    </view>
    <view class="ip-item" @click="upload">
      <view class="title">请添加群图标</view>
      <image :src="personImage" class="up" />
    </view>
    <view class="ip-item">
      <input type="text" v-model="memo" placeholder="请输入简介" placeholder-class="ip" />
    </view>
    <!-- <view class="ip-item"> -->
    <editText @edit="(data) => brief = data" />
    <!-- </view> -->
    <!-- <view class="ip-item">
      <textarea type="text" placeholder="圈子介绍编辑" placeholder-class="ip" class="text-area" v-model="brief" />
    </view> -->
  </view>
  <view class="btns">
    <Button @clickButton="carete" :loading="loading" loading-text="创建中" text="确认创建" />
  </view>

  <!-- 入群填写项 -->
  <van-popup v-model:show="groupShow" position="bottom" round>
    <view class="pop-main">
      <view class="pop-title dispaly-just-between">
        <view class="cancel" @click="groupShow = false">取消</view>
        <view class="confirm" @click="groupConfirm">确定</view>
      </view>
      <view class="list">
        <scroll-view scroll-y="true" class="scroll-Y">
          <view :class="{ must: item.isTrue, active: item.isSelect }" class="item" @click="clickItem(item, index)"
            v-for="(item, index) in groupTypeList" :key="index">{{ item.name }}</view>
        </scroll-view>
      </view>
    </view>
  </van-popup>

  <!-- 手机号加密 -->
  <van-popup v-model:show="telEshow" position="bottom" round>
    <view class="pop-main">
      <view class="pop-title dispaly-just-between">
        <view class="cancel" @click="telEshow = false">取消</view>
        <view class="confirm" @click="telConfirm">确定</view>
      </view>
      <view class="list">
        <scroll-view style="height: 320rpx; max-width: 320rpx" scroll-y="true" class="scroll-Y">
          <view :class="{ active: current == index }" class="item" @click="telConfirmCall(index)"
            v-for="(item, index) in telEncryptionTyleList" :key="index">{{ item.name }}</view>
        </scroll-view>
      </view>
    </view>
  </van-popup>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { BASE_URL } from "@/config/base.js";
import { getWriteFillList, getWriteCircle } from "@/api/apiList";
import editText from "@/components/editText/editText.vue";

const groupShow = ref(false);

const formData = ref({
  groupData: "",
  telE: "",
});

const groupTypeList = ref([]);

// 点击入群项
const clickItem = (item, _index) => {
  if (!item.isTrue) item.isSelect = !item.isSelect;
};

const selectGoupProject = ref([]);
const selectGoupType = ref([]);
// 确定入群项
const groupConfirm = () => {
  const mustList = groupTypeList.value.filter((item) => item.isTrue);
  const selectList = groupTypeList.value.filter((item) => item.isSelect);
  selectGoupProject.value = [...mustList, ...selectList];
  let selectGoupProjectNameList = [];
  let selectGoopProjectTypeList = [];
  selectGoupProject.value.forEach((item) =>
    selectGoupProjectNameList.push(item.name)
  );
  selectGoupProject.value.forEach((item) =>
    selectGoopProjectTypeList.push(item.type)
  );
  formData.value.groupData = selectGoupProjectNameList.join(",");
  selectGoupType.value = selectGoopProjectTypeList.join(",");
  groupShow.value = false;
};

// 手机号加密方式
const telEshow = ref(false);
const telEncryptionTyleList = ref([]);

// 选择手机号加密方式
const current = ref<number>(null);
const currentName = ref<string>(undefined);
const telConfirm = () => {
  formData.value.telE = telEncryptionTyleList.value[current.value].type;
  currentName.value = telEncryptionTyleList.value[current.value].name;
  telEshow.value = false;
};

// 获取填写项的数据
const getWRiteFillData = async () => {
  const response = await getWriteFillList("/fills_type");
  if (response && response?.code == 200) {
    response?.data.map((items) => {
      groupTypeList.value.push({
        isTrue: false,
        isSelect: false,
        name: items.dictLabel,
        type: items.dictValue,
        ...items,
      });
    });
  }
};

getWRiteFillData();

// 获取加密方式
const Encryption = async () => {
  const response = await getWriteFillList("/encry_type");
  if (response && response?.data) {
    response?.data?.map((items) => {
      telEncryptionTyleList.value.push({
        name: items.dictLabel,
        type: items.dictValue,
        ...items,
      });
    });
  }
};

Encryption();

// 上传群图标
const personImage = ref<string>();
const upload = async () => {
  uni.chooseImage({
    count: 1,
    success: async (Response) => {
      try {
        const parms = Response.tempFilePaths[0];
        if (parms) {
          uni.uploadFile({
            url: BASE_URL + "/prod-api/common/upload",
            name: "file",
            filePath: parms,
            header: {
              Authorization: "Bearer " + uni.getStorageSync("token"),
            },
            success: (response) =>
              new Promise(async (resolve) => {
                const JSONDATA = JSON.parse(response.data);
                console.log(JSONDATA);
                if (JSONDATA?.code <= 200 && JSONDATA?.code > 100) {
                  uni.showToast({
                    title: "上传成功",
                    icon: "none",
                  });
                  personImage.value = JSONDATA?.url;
                } else {
                  uni.showToast({
                    title: "上传失败，请注意上传格式，或者请联系管理员",
                    icon: "none",
                  });
                }
              }),
          });
        }
      } catch (error) { }
    },
  });
};

// 动态设置标题
const setTitle = () => {
  uni.setNavigationBarTitle({
    title: careteType.value == "hy" ? "创建行业社群圈子" : "创建同学圈子",
  });
};

const careteType = ref("");
onLoad((option) => {
  careteType.value = option.type ? option.type : "";
  setTitle();
});

const loading = ref(false);
const circleName = ref<string>("");
const brief = ref<string>("")
const memo = ref('')
const icon = ref('')
const carete = async () => {
  if (!circleName.value) {
    uni.showToast({
      title: '请输入圈子名称',
      icon: 'none'
    })
    return
  }
  if (!selectGoupType.value.length) {
    uni.showToast({
      title: '请选择入群填写项',
      icon: 'none'
    })
    return
  }
  if (!getConfirmCallName.value) {
    uni.showToast({
      title: '请选择加密方式',
      icon: 'none'
    })
    return
  }
  if (!personImage.value) {
    uni.showToast({
      title: '请上传群图标',
      icon: 'none'
    })
    return
  }
  if (!memo.value) {
    uni.showToast({
      title: '请填写群简介',
      icon: 'none'
    })
    return
  }
  if (!brief.value) {
    uni.showToast({
      title: '请填写群介绍',
      icon: 'none'
    })
    return
  }
  loading.value = true;
  const pamrs = {
    type: careteType.value == "hy" ? 0 : 1,
    name: circleName.value,
    fills: selectGoupType.value.split(","),
    encry: getConfirmCallName.value,
    way: 1,
    brief: brief.value,
    icon: personImage.value,
    memo: memo.value
  };
  const response = await getWriteCircle(pamrs);
  if (response && response?.code == 200) {
    setTimeout(() => {
      loading.value = false;
      uni.showToast({
        title: "圈子创建成功",
        icon: "none",
      });
      setTimeout(() => {
        uni.navigateBack({
          delta: 1,
        });
      }, 800);
    }, 2000);
  }
};
const getConfirmCallName = ref();
const telConfirmCall = (index) => {
  current.value = index;
  getConfirmCallName.value = telEncryptionTyleList.value[index].name;
};
</script>

<style lang="scss" scoped>
.main {
  padding: 30rpx 30rpx 180rpx 30rpx;
}

.must {
  color: #aaaaaa;
}

.active {
  color: #0753fd !important;
}

.btns {
  padding: 30rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
}

.pop-main {
  .pop-title {
    border-bottom: 1rpx solid #eee;
    padding: 34rpx 40rpx;

    .cancel,
    .confirm {
      font-family: PingFang SC Bold;
      font-size: 32rpx;
    }

    .cancel {
      color: #aaaaaa;
    }

    .confirm {
      color: #0753fd;
    }
  }

  .list {
    padding: 0 40rpx;

    .scroll-Y {
      height: 1000rpx;
      max-height: 1000rpx;

      .item {
        font-family: PingFang SC Bold;
        font-size: 28rpx;
        font-weight: normal;
        padding: 25rpx 0;
      }
    }
  }
}
</style>
